<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery转dom</title>
  <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
    $(function () {
      /*
      dom对象转jQuery对象
       */
      var b1 = document.getElementById("b1");
      var $b1 = $(b1);
      $b1.click(function () {
        alert($b1.val());
      })

      /*
      jQuery对象转dom对象
      1.取下标
      2.用get()
       */
      var $b2 = $("#b2");
      var b2 = $b2[0];
      $b2.click(function () {
        alert(b2.value);//jQuery对象若为空,调用val()方法,不会报错,而是定义undefined
      })

      var $b3 = $("#b3");
      var b3 = $b3.get(0);
      $b3.click(function () {
        alert(b3.value)
      })

    })
  </script>
</head>
<body>
<button id="b1" value="button1">button1</button>
<br/><br/>
<button id="b2" value="button2">button2</button>
<br/><br/>
<button id="b3" value="button3">button3</button>
<br/><br/>
</body>
</html>
